﻿<!DOCTYPE HTML>
<%@page contentType="text/html; charset=UTF-8" language="java" %>
<% String path = request.getContextPath(); %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<script id="allmobilize" charset="utf-8" src="static/web/js/allmobilize.min.js"></script>
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="alternate" media="handheld"  />
	<!--滑块-->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/slider/slide.css"/>
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/slider/layui/css/layui.css"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/slider/layui/layui.js"></script>
	<!-- end 云适配 -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>登录-拉勾网-最专业的互联网招聘平台</title>
	<meta property="qc:admins" content="23635710066417756375" />
	<meta content="拉勾网是3W旗下的互联网领域垂直招聘网站,互联网职业机会尽在拉勾网" name="description">
	<meta content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招" name="keywords">

	<meta name="baidu-site-verification" content="QIQ6KC1oZ6" />

	<!-- <div class="web_root"  style="display:none">h</div> -->
	<script type="text/javascript">
		var ctx = "h";
		console.log(1);
	</script>
	<link rel="Shortcut Icon" href="h/images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/web/css/style.css"/>

	<script src="${pageContext.request.contextPath}/static/web/js/jquery.1.10.1.min.js" type="text/javascript"></script>

	<script type="text/javascript" src="${pageContext.request.contextPath}/static/web/js/jquery.lib.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/web/js/core.min.js"></script>


	<script type="text/javascript">
		var youdao_conv_id = 271546;
	</script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/web/js/conv.js"></script>
</head>

<body id="login_bg">
<div class="login_wrapper">
	<div class="login_header">
		<a href="h/"><img src="${pageContext.request.contextPath}/static/web/images/logo_white.png" width="285" height="62" alt="拉勾招聘" /></a>
		<div id="cloud_s"><img src="${pageContext.request.contextPath}/static/web/images/cloud_s.png" width="81" height="52" alt="cloud" /></div>
		<div id="cloud_m"><img src="${pageContext.request.contextPath}/static/web/images/cloud_m.png" width="136" height="95"  alt="cloud" /></div>
	</div>

	<input type="hidden" id="resubmitToken" value="9b207beb1e014a93bc852b7ba450db27" />
	<div class="login_box">

		<form id="loginForm" action="<%=path%>/zhuang/login" method="post">
			<c:set var="referer" value="${empty(param.referer)?header.referer:param.referer}"></c:set>
			<input type="hidden" name="referer" value="${referer}">
			<c:if test="${param.msg eq 'kong'}">
				<div>用户名或密码不正确！</div>
			</c:if>
			<c:if test="${param.msg eq 'can'}">
				<div>请选择一个类型！</div>
			</c:if>
			<c:if test="${param.msg eq 'c'}">
				<div>密码修改成功，请重新登录！</div>
			</c:if>
			<ul class="register_radio clearfix">
				<li>
					找工作
					<input type="radio" value="0" name="type" />
				</li>
				<li>
					招人
					<input type="radio" value="1" name="type" />
				</li>
			</ul>
			<input type="text" id="email" name="email" value="" tabindex="1" placeholder="请输入登录邮箱地址" />
			<span></span>
			<br>
			<span></span>
			<input type="password" id="password" name="userpass" tabindex="2" placeholder="请输入密码" />
			<div id="sliderBox" onselectstart="return false;">
				<div class="bgColor"></div>
				<div class="txtBox" >请拖动滑块验证</div>
				<!--给i标签添加上相应字体图标的类名即可-->
				<div class="slider"><i class="layui-icon layui-icon-right" style="font-size:28px;"></i></div>
			</div>


			<span class="error" style="display:none;" id="beError"></span>
			<label class="fl" ><input name="rememberMe" type="checkbox"  value="" checked="checked"/> 记住我</label>
			<a href="${pageContext.request.contextPath}/zhuang/reset2" class="fr" target="_blank">忘记密码？</a>
			<input type="submit" id="submitLogin" value="登 &nbsp; &nbsp; 录" />
			<%--<a style="color:#fff;" href="index.html" class="submitLogin" title="登 &nbsp; &nbsp; 录"/>登 &nbsp; &nbsp; 录</a>--%>


			<input type="hidden" id="callback" name="callback" value=""/>
			<input type="hidden" id="authType" name="authType" value=""/>
			<input type="hidden" id="signature" name="signature" value=""/>
			<input type="hidden" id="timestamp" name="timestamp" value=""/>
		</form>
		<div class="login_right">
			<div>还没有拉勾帐号</div>
			<a href="${pageContext.request.contextPath}/zhuang/register" class="registor_now">立即注册</a>
			<div class="login_others">使用以下账号直接登录</div>
			<a  href="h/ologin/auth/sina.html"  target="_blank" class="icon_wb" title="使用新浪微博帐号登录"></a>
			<a  href="h/ologin/auth/qq.html"  class="icon_qq" target="_blank" title="使用腾讯QQ帐号登录" ></a>
		</div>
	</div>
	<div class="login_box_btm"></div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	var path="${pageContext.request.contextPath}";
	$(function () {
		$("#email").blur(checkEmail);
	});

	//验证邮箱格式是否正确
	function checkEmail(){

		var email=$("#email").val();
		var reg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		var flag=reg.test(email);
		if(!flag){
			$("#email").next().html("");
			$("#email").next().css("color","");
			$("#email").next().next().next().html("邮箱格式不正确");
			$("#email").next().next().next().css("color","red");
			return false
		}
		else {
			$("#email").next().next().next().html("");
			$("#email").next().next().next().css("color","");
			$("#email").next().html("√");
			$("#email").next().css("color","green");
			return true;
		}

	}


	$(document).ready(function(e) {
		$('.register_radio li input').click(function(e){
			$(this).parent('li').addClass('current').append('<em></em>').siblings().removeClass('current').find('em').remove();
		});

		$('#email').focus(function(){
			$('#beError').hide();
		});
	});

</script>
</body>
</html>

<script>
	//一、定义了一个获取元素的方法
	function getEle(selector){
		return document.querySelector(selector);
	}
	//二、获取到需要用到的DOM元素
	var box = getEle("#sliderBox"),//容器
			bgColor = getEle(".bgColor"),//背景色
			txt = getEle(".txtBox"),//文本
			slider = getEle(".slider"),//滑块
			icon = getEle(".slider>i"),
			successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
			downX,//用于存放鼠标按下时的位置
			isSuccess = false;//是否解锁成功的标志，默认不成功

	//三、给滑块添加鼠标按下事件
	slider.onmousedown = mousedownHandler;

	//3.1鼠标按下事件的方法实现
	function mousedownHandler(e){
		bgColor.style.transition = "";
		slider.style.transition = "";
		var e = e || window.event || e.which;
		downX = e.clientX;
		//在鼠标按下时，分别给鼠标添加移动和松开事件
		document.onmousemove = mousemoveHandler;
		document.onmouseup = mouseupHandler;
	};

	//四、定义一个获取鼠标当前需要移动多少距离的方法
	function getOffsetX(offset,min,max){
		if(offset < min){
			offset = min;
		}else if(offset > max){
			offset = max;
		}
		return offset;
	}

	//3.1.1鼠标移动事件的方法实现
	function mousemoveHandler(e){
		var e = e || window.event || e.which;
		var moveX = e.clientX;
		var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
		bgColor.style.width = offsetX + "px";
		slider.style.left = offsetX + "px";

		if(offsetX == successMoveDistance){
			success();
		}
		//如果不设置滑块滑动时会出现问题（目前还不知道为什么）
		e.preventDefault();
	};

	//3.1.2鼠标松开事件的方法实现
	function mouseupHandler(e){
		if(!isSuccess){
			bgColor.style.width = 0 + "px";
			slider.style.left = 0 + "px";
			bgColor.style.transition = "width 0.8s linear";
			slider.style.transition = "left 0.8s linear";
		}
		document.onmousemove = null;
		document.onmouseup = null;
	};

	//五、定义一个滑块解锁成功的方法
	function success(){
		isSuccess = true;
		txt.innerHTML = "验证通过";
		bgColor.style.backgroundColor ="lightgreen";
		slider.className = "slider active";
		icon.className = "layui-icon layui-icon-ok";
		//滑动成功时，移除鼠标按下事件和鼠标移动事件
		slider.onmousedown = null;
		document.onmousemove = null;
	};
</script>
<script>
	$(function(){
		//给form表单添加提交事件  当提交form表单的时候u 执行该事件
		$("#loginForm").submit(check);
	});

	//方法返回true  表单就会提交  返回的false  表单就不会提交
	function check()
	{
		var fname = checkEmail();
		if(fname==true&isSuccess==true)
		{
			return true;
		}
		else
		{
			return false;
		}

	}
</script>